<!DOCTYPE html>
<html>

	<head>
	
		<!-- META -->
		<meta charset = "utf-8">
		<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
		<meta name = "apple-mobile-web-app-capable" content = "yes" /> 
		
		<!-- CSS -->
		
		<link rel = "stylesheet" media = "screen" href = "common.css" />
		<link rel = "stylesheet" media = "screen" href = "default.css" />
		<!-- jQuery library -->
		<script type="text/javascript" src = "jquery-1.4.min.js"></script>
		
		<script src = "jquery.easing-1.3.js"></script>
		
		<!-- iosSlider plugin -->
		<script src = "jquery.iosslider.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				
				$('.iosSlider').iosSlider({
					desktopClickDrag: true,
					snapToChildren: true,
					infiniteSlider: true,
					navSlideSelector: '.sliderContainer .slideSelectors .item',
					onSlideComplete: slideComplete,
					onSliderLoaded: sliderLoaded,
					onSlideChange: slideChange,
					autoSlide: true,
					scrollbar: true,
					scrollbarContainer: '.sliderContainer .scrollbarContainer',
					scrollbarMargin: '0',
					scrollbarBorderRadius: '0',
					keyboardControls: true
				});
			
			});
			
			function slideChange(args) {
						
				$('.sliderContainer .slideSelectors .item').removeClass('selected');
				$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
			
			}
			
			function slideComplete(args) {
				
				if(!args.slideChanged) return false;
				
				$(args.sliderObject).find('.text1, .text2').attr('style', '');
				
				$(args.currentSlideObject).find('.text1').animate({
					right: '100px',
					opacity: '0.8'
				}, 400, 'easeOutQuint');
				
				$(args.currentSlideObject).find('.text2').delay(200).animate({
					right: '50px',
					opacity: '0.8'
				}, 400, 'easeOutQuint');
				
			}
			
			function sliderLoaded(args) {
					
				$(args.sliderObject).find('.text1, .text2').attr('style', '');
				
				$(args.currentSlideObject).find('.text1').animate({
					right: '100px',
					opacity: '0.8'
				}, 400, 'easeOutQuint');
				
				$(args.currentSlideObject).find('.text2').delay(200).animate({
					right: '50px',
					opacity: '0.8'
				}, 400, 'easeOutQuint');
				
				slideChange(args);
				
			}
		</script>
		
		<title>iosScripts.com demo</title>
		
	</head>
	
	<body>
		
		<div class = 'fluidHeight'>
			
			<div class = 'sliderContainer'>
			
				<div class = 'iosSlider'>
				
					<div class = 'slider'>
					
						<div class = 'item item1'>
							<div class = 'inner' style = 'background-image:url(h-slider-2-l.jpg)'> 
							</div>
						</div>
						
						<div class = 'item item2'>
							<div class = 'inner' style = 'background-image:url(h-slider-2-l.jpg)'> 
							</div>
						</div>
						
						<div class = 'item item3'>
							<div class = 'inner'> 
							</div>
						</div>
						
						<div class = 'item item4'>
							<div class = 'inner'> 
							</div>
						</div>
						 
					</div>
				
				</div>
				
				<div class = 'slideSelectors'>
				
					<div class = 'item selected'></div>
					
					<div class = 'item'></div>
					
					<div class = 'item'></div>
					
					<div class = 'item'></div> 
				
				</div>
				
				<div class = 'scrollbarContainer'></div>
				
			</div>
		
		</div>
	
	</body>

</html>